<template>
    <!-- EA-BA-DA-我的账户 安全设置 银行卡 -->
    <!-- 外包裹 -->
    <div class="wrapper" v-show="showSettingPhone">
        <div id="wrap">
            <!-- 标题 -->
            <div class="head">
                <!-- <img class="shouji" src="../../assets/img/shouji.png" alt=""> -->
                <span class="shouji">
                    <i class="iconfont iconnav_shoujigoucai"></i>
                </span>
                <p class="title">手机号</p>
                <span @click="$emit('cancel')" class="cha">
                    <i class="iconfont iconty_guanbi"></i>
                </span>
                <!-- <img class="cha" src="../../assets/img/cha.png" alt=""> -->
            </div>
            <div class="content">
                <input-item-pc :input-value='phone' v-on:clear-content="phone=''" v-on:input="phone=$event" pos-right="changeRight" class="input input1" input-name="手机号：" input-placeholder="请输入手机号">
                    <p @click="obtainYZM" v-show="obtain" slot="btn1">
                        获取验证码
                    </p>
                    <p v-show="!obtain" slot="btn2">
                        <span class="red">{{time}}s</span>
                        <span>后重新获取</span>
                    </p>
                </input-item-pc>
                <input-item-pc :input-value='yzm' v-on:input="yzm=$event" v-on:clear-content="yzm=''" class="input inpu2" input-name="验证码：" input-placeholder="请输入收到的6位数验证码"></input-item-pc>
                <p class="tipTitle">提示:</p>
                <p class="tip">联系方式绑定后，不可修改，如需修改请联系代理，请谨慎操作！</p>
                <button @click="$emit('cancel')" class="btn quxiao">取消</button>
                <button @click="$emit('save',phone)" class="btn baocun">保存</button>
            </div>
        </div>
    </div>
    
</template>

<script>
import inputItemPc from './inputItem-PC2'

export default {
    name: 'securitySettingPhone.vue',
    props: ['showSettingPhone'],
    components: {
        inputItemPc
    },
    data(){
        return{
            phone: '',
            obtain: true,
            time: 60,
            timer: '',
            yzm: ''
        }
    },

    methods:{
        obtainYZM(){
            this.obtain = false;
            if(this.time > 0){
                this.timer = setInterval(this.timeChange,1000)
            }
            
        },
        timeChange(){
            if( this.time > 0 ){
                this.time--;
            }else{
                this.obtain = true;
            }
            
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/variables.styl'
    .wrapper
        position fixed;
        width 100%;
        height 100%;
        top 0
        left 0
        bottom 0
        right 0
        background-color rgba(0,0,0,.2);
        z-index 1000
        #wrap
            position absolute
            left 50%;
            top 50%
            width 480px;
            height 350px;
            background-color #faf8f8
            border-radius 5px;
            transform translate(-50%, -50%)
            .head
                width 480px;
                height 48px;
                background-color #1d222e;
                border-top-left-radius 5px;
                border-top-right-radius 5px;
                overflow auto;

                img 
                    float left;
                    
                .title
                    float left;
                    color #fff;
                    height 48px;
                    width 418px;
                    line-height 48px;
                    text-align center;
                    font-weight bold
                    font-size 15px;
                .shouji
                    float left
                    margin-top 13px;
                    margin-left 16px;
                    //占位代码 删
                    display inline-block;
                    width 12px;
                    height 20px;
                    .iconfont 
                        color #fff 
                        font-size 20px 
                .cha
                    float left;
                    margin-top 17px;
                    cursor pointer;
                    //占位代码 删
                    display inline-block;
                    width 12px;
                    height 12px;
                    .iconfont 
                        color $color-theme-red 
                        font-size 24px 

            .content
                width 478px;
                height 300px;
                border 1px solid #dbd3d3;
                background-color #faf8f8;
                border-top none;
                // padding-top 18px;
                border-bottom-left-radius 5px;
                border-bottom-right-radius 5px;

                .input
                    margin-bottom 3px;
                    margin-left 19px;
                .input1
                    p
                        position relative;
                        font-size 14px;
                        width 101px;
                        top -32px;
                        left 339px;
                        color #8c8f98;
                        cursor pointer
                        .red
                            color #e02828;
                            font-size 15px;
                .tipTitle
                    color #e02828;
                    font-size 14px;
                    font-weight bold;
                    margin-left 21px;
                    margin-top 15px;
                    margin-bottom 10px;
                .tip
                    color #8c8f98;
                    font-size 14px;
                    margin-left 21px;
                .btn
                    // position absolute
                    // bottom 19px;
                    margin-top 37px;
                    width 94px;
                    height 34px;
                    border none;
                    outline none;
                    background-color #f6f6f6;
                    border 1px solid #dbd3d3;
                    box-shadow 0px 2px 5px 2px #eee;
                    border-radius 5px;
                    color #2b3042;
                    font-size 14px;
                    text-align center;
                    cursor pointer;
                .quxiao
                    margin-left 135px;
                .baocun
                    margin-left 12px;
                    background-color #c22323;
                    color #fff;
                    box-shadow 0px 1px 1px 1px #c22323 inset;
</style>
